<%--
  Created by IntelliJ IDEA.
  User: CM
  Date: 17/5/12
  Time: 下午10:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>

<html>
<head>
    <jsp:include page="../../common/header.jsp"></jsp:include>
    <jsp:include page="../../common/cloud-head.jsp"></jsp:include>
    <jsp:include page="../../common/dt.jsp"></jsp:include>
    <script type="text/javascript" src="${ctx}/resources/pagination/script/jquery.pagination.js"></script>
    <link href="${ctx}/resources/pagination/style/pagination.css" rel="stylesheet" type="text/css">
    <link href="${ctx}/resources/pagination/style/common.css" rel="stylesheet" type="text/css">


    <style>
        .page-content {
            padding: 1rem 2rem;
            overflow: hidden;
            position: relative;
        }

        .info-box {
            min-width: 20rem;
        }

        .info-box img {
            display: inline-block;
            width: 6rem;
            height: 6rem;
            vertical-align: top;
            margin-left: 2rem;
        }

        .info-box .name-box {
            display: inline-block;
            vertical-align: top;
            margin-left: 1rem;
        }

        .name-box p {
            line-height: 3rem;
            margin: 0;
            padding: 0;
        }

        .operator-box {
            min-width: 20rem;
        }

        .operator-box .btn {
            margin: 0 0.8rem;
        }

        .auth-dialog .modal-header {
            padding: 0;
        }

        .auth-dialog .auto-info-box {
            height: 10rem;
            display: block;
            overflow-y: auto;
        }

        .auth-dialog .form-group img {
            display: inline-block;
            width: 8rem !important;
            height: auto;
        }

        .auth-dialog .form-group img:first-child {
            margin-left: 4rem;
        }

        .auth-dialog .modal-content {
            height: 30rem;
        }

        .auth-info-box, .adduser-box {
            height: 20rem;
            max-height: 20rem;
            overflow: auto;
            padding: 3rem 2rem;
        }

        .choose-file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

        #up-file {
            position: absolute;
            width: 80px;
            /* font-size: 100px; */
            right: 0px;
            top: 0;
            left: 0px;
            opacity: 0;
        }

        .choose-file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: solid;
        }

        .modal .modal-footer {
            border-radius: 0 0 2px 2px;
            background-color: #fafafa;
            padding: 4px 6px;
            height: 56px;
            width: 100%;
        }

        .modal-footer {
            margin-top: 15px;
            padding: 19px 20px 20px;
            text-align: right;
            border-top: 1px solid #e5e5e5;
        }

        .modal-footer button {
            vertical-align: middle;
            display: inline-block;
            margin: 0 0.8rem !important;
            min-width: 6rem;
        }

        .showfilename {
            display: inline-block;
            font-size: 2rem;
            line-height: 3rem;
            vertical-align: top;
        }
        table img.data-preview-img.edit_able {
            margin: 0.2rem 0.4rem;
            width: 8rem;
        }

        span.edit_able {
            cursor: pointer;
            position: relative;
            border-bottom: 1px solid transparent;
        }

        span.edit_able:hover {
            border-bottom-color: #8c8c8c;

        }

        span.edit_able:hover:after {
            content: '\f044';
            font-family: FontAwesome;
            margin-left: 0.5rem;
            color: #0aa;
            text-decoration: none !important;

        }
    </style>
</head>
<body>


<div class="page-content">
    <div class="col-md-12">
        <div class="card">
            <div class="card-action">
                条件查询
            </div>
            <div class="card-content">
                <div class="col-md-12">
                    <div class="form-group normal col-md-4">
                        <label>申请时间</label>
                        <input type="text" value="" name="timeRange" id="timeRange" placeholder="点击选择"
                               style="width:24rem;"/>
                    </div>
                    <button class="btn btn-primary" onclick="reSearch();">
                        <i class="fa fa-search"></i>查询
                    </button>
                </div>
            </div>
        </div>

    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-content">
                <div class="col-md-12">
                    <table id="mainTable" cellpadding="0" cellspacing="0" border="0" class="auto-table">
                        <thead>
                        <tr>
                            <td>用户姓名</td>
                            <td>手机号码</td>
                            <td>申请时间</td>
                            <td>是否已联系</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <input type="hidden" name="pageNum" id="pageNum" value="1"/>
                    <input type="hidden" name="pageSize" id="pageSize" value="10"/>
                    <input type="hidden" name="total" id="total" value=""/>

                    <div class="pagination pagination-right pagination-small" id="pagination">

                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>

</div>
<script type="text/html" id="dataTmpl">
    <tr data-id="\${phone}">
        <td>
            <div class="info-box">
                <div class="name-box">
                   <span>\${name}</span>
                </div>
            </div>
        </td>
        <td>
            <p class="phone-box">\${phone||'未绑定'}</p>
        </td>
        <td>
            <p class="register-time">
                \${formatDate(regTime)}
            </p>
        </td>

                    <td>
                        {{if statu == 0}}
                       <span>未联系</span>
                        {{else statu == 1}}
                        <span>已联系</span>
                        {{/if}}
                    </td>

                <td>
                    {{if statu == 0}}
                    <div class="operator-box">
                        <button class="btn btn-primary" onclick="updatestatu('\${phone}')">已联系</button>
                        <button class="btn btn-danger" onclick="deleteuser('\${phone}')">删除</button>
                    </div>
                    {{else statu == 1}}
                    <div class="operator-box">
                        <button class="btn btn-danger" onclick="deleteuser('\${phone}')">删除</button></div>
                    {{/if}}
                </td>
        <%--<td>--%>
        <%------%>
        <%--</td>--%>
    </tr>


</script>
<script>
    $(function () {
        loadData();
    })


    function loadData() {
        var data = {
            pageNum: $("#pageNum").val(),
            pageSize: $("#pageSize").val()
        };
        asyncAjax({
            url: ctx + "/" +
            "portal/applay/list?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            type: "post",
            beforeSend: function (req) {
                $("#mainTable tbody").html("<tr><td colspan=\"7\"><div class=\"alert alert-warning\">正在请求数据...</div></td></tr>");
            },
            success: function (res) {
                //console.log("res:%o", res);
                if (res["result"] == "0") {
                    if (res["data"].length <= 0) {
                        $("#mainTable tbody").html("<tr><td colspan=\"7\"><div class=\"alert alert-warning\">没有找到符合条件的数据！</div></td></tr>");
                    } else {
                        $("#total").val(res["total"] || 0);
                        $("#mainTable tbody").html("");
                        $("#dataTmpl").tmpl(res["data"]).appendTo("#mainTable tbody");
                    }
                } else {

                }
            }
        })
    }

    function deleteuser(phone) {
        var data ={phone:phone};
        asyncAjax({
            url: ctx + "/portal/applay/delete?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            success: function (res) {
                //console.log("res:%o", res);
                if (res["result"] == "0") {

                    bootbox.alert("操作成功");
                    loadData();
                } else {
                    bootbox.alert("发生错误:" + res["msg"]);
                }
            }
        })
    }
    function updatestatu(phone){
        var data ={phone:phone};
        asyncAjax({
            url: ctx + "/portal/applay/update?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            success: function (res) {
                //console.log("res:%o", res);
                if (res["result"] == "0") {
                    bootbox.alert("操作成功");
                    loadData();
                } else {
                    bootbox.alert("发生错误:" + res["msg"]);
                }
            }
        })
    }
</script>
</body>
</html>
